<template>
  <div class="container-pt">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      fixed
      title="我的文章"
    />

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <article-list
        :disable-swiper="false"
        v-for="(item,index) in articleList"
        :key="index"
        :item="item"
      >
        <van-button square type="primary" @click="update(item.id)"  text="修改" />
        <van-button square type="danger" text="删除" @click="del(item.id)" />
      </article-list>
    </van-list>
    <van-popup v-model="active" style="height: 100%" position="bottom">
      <van-nav-bar title="修改文章">
        <template #right>
          <van-icon name="close" @click="active = false" size="18" />
        </template>
      </van-nav-bar>
      <article-form :item="articleDetail" :isCheck="boolen" :cateId="itemCateId"></article-form>
    </van-popup>
  </div>
</template>

<script>
import articleList from '@/components/article-list.vue'
import articleForm from '@/components/article-form.vue'
import request from '@/utils/request'
import { Toast } from 'vant'
export default {
  components: { articleList, articleForm },
  name: 'articlePage',
  data () {
    return {
      active: false,
      articleList: [],
      loading: false,
      finished: false,
      limit: '10',
      page: '1',
      articleDetail: {},
      boolen: true,
      itemCateId: 0
    }
  },
  async created () {
  },

  methods: {
    async onLoad () {
      const res = await request.get('/user/myArticle', {
        params: { limit: this.limit, page: this.page }
      })
      this.articleList.push(...res.data.data)
      this.loading = false
      this.page++
      if (this.page >= res.data.totalPages) {
        this.finished = true
      }
    },
    async del (id) {
      // 删除服务器数据
      await request.get('/user/delArticle', { params: { id } })

      // 删除页面数据
      this.articleList = this.articleList.filter(item => item.id !== id)
      Toast.success('删除成功！')
    },
    // 修改文章
    async update (id) {
      this.active = true
      const res = await request.get('/index/show', { params: { id } })
      this.articleDetail = res.data.info
      this.itemCateId = res.data.info.cateid
    }
  }
}
</script>

<style>
</style>
